<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>addUser 添加用户</title>
	</head>
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		.Main{
			width:290px;  			
			margin:0 auto;
			text-align:right;
		}
		.Main p input[type=text],.Main p select{
			margin-left:5px;
			height:26px;
			width:210px;
			border:1px soild #dadada;
		}
		.Main p{
			margin-top:5px;
		}
		input[type=radio]{
			position:relative;
			top:5px;
			left:5px;
		}
		select{
			width:66px;
			height:26px;
			border:1px solid #dadada;
			margin-right:5px;
			font-family:"微软雅黑";
			margin-top:3px;
		}
		.role span{
			display:inline-block;
			width:225px;
			text-align:left;
			margin-top:7px;
		}
		.role span i{
			background:#fea513;
			margin-left:6px;
		}
		.btn{
			text-align:center;
			padding-top:15px;
			padding-bottom:15px;
		}
		.btn i{
			margin-right:15px;
		}
		.cancle{
			background:#a1a4a9;
		}
		
		.checkbox{
			margin-left:70px;
			margin-top:10px;
			
			
			padding-top:5px;
			padding-left:5px;
			text-align:left;
		}
		.checkbox label{
			margin-right:10px;
			display:inline-block;
			margin-top:3px;
		}
		.checkbox label img{
		display:inline;
		margin-right:5px;
		}
		.Main .born{
			width:100%;
		  	 margin:auto;
			height:30px;
			margin-top:15px;
			line-height:30px;
			text-align:right;
			padding-left:10px;
		}
		.bornDate{
			padding-right:10px;
		}
		.Main  .borthdate{
		display:inline-block;
		
		}
		.orgnize{
		margin-left:3px;
		}
		.wid{
		margin-left:0px;
		margin-right:0px;
		}
		.born_p input{
			border:1px solid rgb(169, 169, 169);
			
		}
	</style>
	<body>
		<div class='Main'>
			<p style='margin-top:25px;'>用户名<input  type='text' id="loginname"/><span style='color:red;'>*</span></p>
			<p>姓名<input  type='text' id="name"/><span style='color:red;'>*</span></p>
			<p class="orgnize">&nbsp;&nbsp;部门
				<select class="wid" id="organizationId">
				</select>
			<span style='color:red;'>*</span></p>
			<p>性别
			<span style='width:224px;display:inline-block;text-align:left;'>
			<input type='radio' name="sex" value="1" checked/>&nbsp;&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;
			<input type='radio' name="sex" value="2" />&nbsp;&nbsp;&nbsp;女
			</span>
			</p>
		
			<p class='born_p'>出生年月<input type='text' id="birthday" class="datespicker" onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'})"/><span style='color:#f1f1f1;'>*</span></p>
			<p>邮箱<input type='text' id="email"/><span style='color:red;'>*</span></p>
			<p>手机<input type='text' id="phone"/><span style='color:#f1f1f1;'>*</span></p>
			<p>座机<input type='text' id="tel"/><span style='color:#f1f1f1;'>*</span></p>
			<p class='role'>角色<span><i class='Dolo_btn xiugai'>编辑</i></span></p>
			<div class='checkbox'>
			  <!--  
				<label><img src="../img/pricePlan/ok.png"><span>超级管理员</span></label>
				<label><img src="../img/pricePlan/ok.png"><span>超级管理员</span></label>
				<label><img src="../img/pricePlan/ok.png"><span>超级管理员</span></label>
				<label><img src="../img/pricePlan/ok.png"><span>超级管理员</span></label>
				-->
			
			</div>
			<p>状态<span style='width:224px;display:inline-block;text-align:left;'>
			<input type='radio' name="state" value="0" checked />&nbsp;&nbsp;&nbsp;正常&nbsp;&nbsp;&nbsp;
			<input type='radio' name="state" value="1"/>&nbsp;&nbsp;&nbsp;无效
			</span>
			</p>
			<p class="btn"><i class='Dolo_btn sure'>确认</i><i class='Dolo_btn cancle'>取消</i></p>
		</div>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
		<script>
		/*________________________________________________________________________________部门数据的加载*/
			$.ajax({
			type:"get",
			url:"../User?temp="+Math.random(),
			dataType:"json",
			success:function(data){
				$("#organizationId").html("");
				var optionStr="";
				for(var i=0;i<data.data.length;i++){
					optionStr+="<option value="+data.data[i].id+">" + data.data[i].name + "</option>";  
				}
					
				$("#organizationId").html(optionStr);
					
				}
		})
		
		
		/*________________________________________________________________________________取消*/
			$(".cancle").click(function(){
				closeWin()
			})
		/*__________________________________________編輯_______________________________________________________*/
			$(".xiugai").click(function(){
				layer.open({
					type: 2,
					title: ['编辑角色','background-color:#00aa98; color:#fff;'],
					shadeClose: true,
					shade: 0.3,
					area: ['100%', '100%'],  
					content: ['../ak/addUser_edit.html'],// iframe的url，no代表不显示滚动条
					end:function(){
					
					}
						
				});
			})

		
			
			
			
			function getRole(data){
				//console.log(data)//得到传过来的value和中文字符串
				role_Idlist=data.value;//角色数组
				var str="";
				$(".checkbox").empty();
				for(var i=0;i<data.value.length;i++){
					for(var j=0;j<data.text.length;j++){
						i=j;
						str+="<label value="+data.value[i]+"><img src='../img/pricePlan/ok.png'><span>"+data.text[j]+"</span></label>"
					}
				}
				$(".checkbox").append(str);//将选择的角色追加进去
			    
			}
		
			$(".sure").click(function(){
				//用户名不能为空
				if($("#loginname").val()==""){
					alert("请输入您的用户名");
					return false;
				}
				//姓名不能为空
				if($("#name").val()==""){
					alert("请输入您的姓名");
					return false;
				}
				//邮箱不能为空
				if($("#email").val()==""){
					alert("请输入您的邮箱");
					return false;
				}
				 //定义对象，用于盛放数据数据传输
				 var obj={};
				 obj.loginname=$("#loginname").val();//用户名
			     obj.name=$("#name").val();//姓名
			     obj.organizationId=$("#organizationId").val();//部门Id
			     
			     obj.sex=$("input[name='sex']:checked").val();//性别
			    
			     obj.birthday=$("#birthday").val();//出生日期
			     obj.email=$("#email").val();//邮箱
			     obj.phone=$("#phone").val();//手机
			   
			     obj.tel=$("#tel").val();//座机
			     var len=$(".checkbox label").length;
			     if(len==0){
			    	 layer.msg("请选择您的角色",{icon:2});
			    	 return false;
			     }
			    	 
			    obj.roleIds=role_Idlist.join(","); //角色
			     
			     obj.state=$("input[name='state']:checked").val();//状态
			    
			     layer.msg('添加中...', {icon: 16,shade: 0.01});
			     //将得到的数据obj传输给后台
				 $.ajax({
						type:"post",
						url:"../User/add?temp="+Math.random(),
						contentType:'application/json;charset=utf-8',
						data:JSON.stringify(obj),
						async:true,
						success:function(data){
							var data=JSON.parse(data);
							if(data.status.toString()=="1001"){
								layer.msg("添加成功", {icon: 1,time:1000},function(){
									var index = parent.layer.getFrameIndex(window.name);//获取弹窗索引
									parent.layer.close(index);//关闭弹窗
								});			
							}else{
								layer.msg(data.message, {icon: 2,time:1000})
							}
						}
					});
		
			 });
		
		</script>
	</body>
</html>
